<script>
import {removeToken} from "@/utils/localStorage";
import socketService from "@/utils/socketService";
export default {
  methods: {
    handleCommand(command){
      if (command==="toLogin"){
        this.toLogin();
      }
      if (command==="toMyCourse"){
        this.toMyCourse();
      }
      if (command==="toMyAccount"){
        this. toMyAccount();
      }
    },
    toLogin(){
      removeToken();
      localStorage.removeItem('adminId'); // 清除用户 ID ，退出登录提示
      // 断开连接
      socketService.disconnect();
      this.$message({
        message: '退出登录成功',
        center: true,
        type: 'success',
        duration: '1500',
        offset: '80',
      });
      this.$router.push('/adminLogin');
    },
    toMyCourse(){
      this.$router.push('/studentPage/myCourses').catch(err => {
        if (err.name !== 'NavigationDuplicated') {
          throw err; // 处理除 NavigationDuplicated 以外的错误
        }
      });
    },
    toMyAccount(){
      this.$router.push('/studentPage/myAccount').catch(err => {
        if (err.name !== 'NavigationDuplicated') {
          throw err; // 处理除 NavigationDuplicated 以外的错误
        }
      });// 后面再加
    },
  }
}
</script>

<template>
  <div class="header">
    <div class="header-left">
      <h3 tabindex="0" id="siteName" title="攀枝花学院网络教学平台" >
        攀枝花学院网络教学平台
      </h3>
    </div>
    <div class="header-right">
      <el-col>
        <el-dropdown trigger="click" @command="handleCommand">
          <div>
            <span class="demonstration">
              <el-image :src="require('@/assets/admin.png')" fit="cover"></el-image>
          </span>
            <span class="el-dropdown-link">
            管理员<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="toMyCourse">我的课程</el-dropdown-item>
            <el-dropdown-item command="toMyAccount">账号管理</el-dropdown-item>
            <el-dropdown-item command="toLogin">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </div>

  </div>
</template>

<style scoped>
.header {
  width: 100%;
  height: 80px;
  background: #FFFFFF;
  box-shadow: 0px 2px 6px 0px rgba(43, 51, 59, 0.06);
  color: #2B333B;
  position: fixed;
  top: 0;
  right: 0;
  left: 10px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
}
.header-left {
  width: 220px;
  float: left;
  height: 80px;
  display: flex;
  align-items: center;
  display: -webkit-flex;
  display: -ms-flex;
  display: -moz-flex;
  max-width: 60%;
}
.header-right {
  height: 80px;
  width: 220px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，可选 */
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  position: relative;
  top: 10px;
}
.demonstration .el-image{
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
</style>